<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
const form = ref({
  name: '',
  password: '',
})

const onSubmit = () => {
    if(form.value.name == '' && form.value.password == '') {
        ElMessage.error('用户名或密码不能为空')
        return
    }
    if(form.value.name == '17365222483' && form.value.password == '123456') {
        ElMessage.success('登录成功')
    }else {
        ElMessage.error('用户名或密码错误')
    }
}

</script>

<template>
    <div class="login">
        <el-form :model="form" label-width="auto" style="max-width: 600px">
    
            <el-form-item label="用户名">
                <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="密码">
                <el-input v-model="form.password" />
            </el-form-item>

            <el-form-item style="justify-content: flex-end; display: flex;">
                <a href="#" target="_blank" style="color: #409EFF;">忘记密码？</a>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>
.login {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-form {
        height: 400px;
        width: 300px;
        padding: 40px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.5); /* 半透明背景 */
        backdrop-filter: blur(10px); /* 毛玻璃模糊效果 */
        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.18); /* 阴影效果 */

        .el-form-item {
            margin-top: 50px;
        }

        .el-button{
            width: 300px;
        }
    }
}
</style>